<template>
  <ADropdown trigger="click" :placement="props.placement" :arrow="{ pointAtCenter: true }">
    <slot></slot>
    <template #overlay>
      <RDragCheckbox class="r-dropdown-checkbox-list" v-bind="$attrs"></RDragCheckbox>
    </template>
  </ADropdown>
</template>

<script setup>
import { RDragCheckbox } from '@/components/custom';

defineOptions({
  inheritAttrs: false
});
const props = defineProps({
  placement: {
    type: String,
    default: 'bottomLeft'
  }
});
</script>

<style lang="scss" scoped>
.r-dropdown-checkbox-list {
  min-height: 160px;
  padding: 4px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  background-color: var(--bg-color);
  box-shadow: 0 0 8px var(--box-shadow-color);
}
</style>
